<template>
  <div class="search-user-chart" ref="searchUserChartRef">SearchUser</div>
</template>

<script lang="ts">
export default {
  name: "SearchUser",
};
</script>

<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

const searchUserChartRef = ref();
onMounted(() => {
  var myChart = echarts.init(searchUserChartRef.value);
  const option = {
    xAxis: {
      // 两侧不留白
      boundaryGap: false,
      // 不显示内容
      show: false,
      data: [
        "北京",
        "深圳",
        "上海",
        "广州",
        "武汉",
        "西安",
        "拉萨",
        "南昌",
        "长沙",
        "合肥",
        "济南",
        "长春",
      ],
    },
    yAxis: { show: false },
    series: {
      name: "搜索用户数",
      type: "line",
      data: [25, 20, 29, 18, 23, 25, 20, 29, 18, 23, 30, 15],
      smooth: true,
      lineStyle: { color: "#5fbbff" },
      itemStyle: { opacity: 0 },
      areaStyle: { color: "#d8eeff" },
    },
    tooltip: {
      trigger: "axis",
      //   线条提示
      axisPointer: { type: "line" },
    },
    grid: {
      left: 0,
      right: 0,
      top: 10,
      bottom: 0,
    },
  };
  myChart.setOption(option);
});
</script>

<style scoped>
.search-user-chart {
  width: 210px;
  height: 80px;
}
</style>
